<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible"
				   width="1000px" top="5vh"
				   :close-on-click-modal="false"
				   :before-close="handleClose"
				   append-to-body>
			<div class="tab">
				<el-form ref="form" :rules="rules" :model="form" label-width="100px">
					<el-row :gutter="12">
						<el-col :span="8">
							<el-form-item label="任务类型" prop="task_type">
								<el-select v-model="form.task_type" placeholder="请选择任务类型" style="width:100%;" >
									<el-option
										v-for="item in tasktypeOptions"
										:key="item.index"
										:label="item.name"
										:value="item.name">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="Android版本">
								<el-input v-model="form.android_version" placeholder="请输入Android版本"></el-input>
							</el-form-item>

							<el-form-item label="固件版本" >
								<el-input v-model="form.firmware_version" placeholder="请输入固件版本"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="测试人员" prop="tester">
								<el-select v-model="form.tester" placeholder="请选择测试人员" multiple
										   collapse-tags style="width:100%;" >
									<el-option
										v-for="item in testerOptions"
										:key="item.index"
										:label="item.name"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>

							<el-form-item label="ios版本" >
								<el-input v-model="form.ios_version" placeholder="请输入ios版本"></el-input>
							</el-form-item>
							<el-form-item label="插件版本" >
								<el-input v-model="form.unit_version" placeholder="请输入插件版本"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="人力需求" prop="manpower">
								<el-input type="number" v-model="form.manpower" :precision="2" :step="0.1" :min="0"
										  placeholder="请输入人力需求"></el-input>
							</el-form-item>
							<el-form-item label="套件地址" >
								<el-input v-model="form.test_suite_url" placeholder="请输入套件地址"></el-input>
							</el-form-item>
							<el-form-item label="系统版本" >
								<el-input v-model="form.version" placeholder="请输入系统版本"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<el-form-item label="测试区域" >
								<el-input v-model="form.remark" type="textarea" placeholder="请输入测试区域"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<el-form-item label="任务时间" >
								<el-date-picker
									v-model="form.server"
									type="datetimerange"
									:picker-options="pickerOptions"
									range-separator="至"
									start-placeholder="任务开始时间"
									end-placeholder="任务结束时间"
									style="width: 100%;"
									@change="dataChange"
									align="right">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<el-form-item label="附件文档">
								<el-upload
									class="upload-demo"
									action="string"
									:headers="headers"
									:http-request="uploadFile"
									:on-remove="deleteFile"
									:before-upload="beforeUpload">
									<el-button size="small" type="primary">附件上传</el-button>
								</el-upload>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div>
				<span>测试用例</span>
				<el-divider></el-divider>
			</div>
			<div class="testTable">
				<el-table
					v-if="tableData"
					class="marT"
					:data="tableData"
					:border="true"
					:header-cell-style="{background:'#eef1f6'}"
					lazy>
					<el-table-column align="center" type="index" label="序号" width="50">
					</el-table-column>
					<el-table-column align="center" property="case_name" label="用例标题" width="300"></el-table-column>
					<el-table-column align="center" property="priority" label="优先级" ></el-table-column>
					<el-table-column align="center" property="test_type" label="测试类型" ></el-table-column>
					<el-table-column align="center" property="test_module" label="测试模型" ></el-table-column>
<!--					<el-table-column align="center" label="操作" v-if="num != 3">-->
<!--						<template slot-scope="scope">-->
<!--							<span>-->
<!--								<template>-->
<!--									<el-popconfirm title="确认删除吗？" @confirm="del(scope.row)">-->
<!--										<span slot="reference" class="del">删除</span>-->
<!--									</el-popconfirm>-->
<!--								</template>-->
<!--							</span>-->
<!--							<span><a > | </a></span>-->
<!--							<span><a @click="edit(scope.row)" >修改</a></span>-->
<!--						</template>-->
<!--					</el-table-column>-->
				</el-table>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')" v-if="num != 3">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { groupId,orderIdTask,
	taskId,taskIdPost} from '@/api/user'
import axios from "axios";
export default {
	name: 'addForm',
	components:{

	},
	data(){
		return {
			headers:{'Content-Type':'multipart/form-data'},
			dialogFormVisible:false,
			form:{},
			formSure:{},
			id:'',
			rules:{
				task_type:{required: true, message: '请选择任务类型', trigger: 'change' },
				tester: [{ required: true, message: '请选择测试人员', trigger: 'change' }],
				manpower:[{required: true, message: '请输入人力需求', trigger: 'change'}]
			},
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			options:{},
			num:1,
			dataId:'',
			title:'新增',
			tasktypeOptions:[],
			testerOptions:[],
			initTableList:[],
			sureList:[],
			tableData:[]
		}
	},
	created() {
	},
	methods:{
		deleteFile(file, fileList) {
			this.$message.success("成功移除!")
			this.form.doc.forEach((item,index) => {
				var arr = item.split('/')
				if(file.name == arr[arr.length-1] ){
					if(index != 0){
						this.form.doc.splice(index,index)
					}else {
						this.form.doc = []
					}
				}
			})
		},
		beforeUpload(file){
			var type = file.name
			type = type.split('.')[1]
		},
		//上传附件
		uploadFile(file) {
			let url= `${process.env.VUE_APP_KANBAN_HOST}/api/v1/file`
			let fd = new FormData();
			fd.append('file',file.file);
			axios({
				url:url,
				data: fd,
				method:'post',
			}).then(res => {
				console.log(res,12121)
				if(res.data.code === 200) {
					this.$message.success("上传成功!")
					this.form.doc.push(res.data.data.key)
					console.log(this.form.doc,55555555555);
				}
			})
		},
		testList(){
			this.$refs.taskList.taskListVisible = true
			this.$refs.taskList.initData(this.initTableList)
		},
		// 选中用例
		getMsgFormSon (val) {
			val.filter(item => {
				this.sureList.push(item['id'])
			})
		},
		handleClose(){
			this.dialogFormVisible = false
			this.form = {}
			this.milepostOptions = []
			this.testOption = []
			this.productOptions = []
			this.customerOptions = []
			this.productLineOptions = []
			this.groupOptions = []
			this.initTableList = []
			this.salesOption = []
		},
		add(form){
			this.$refs[form].validate((valid) => {
				if (valid) {
					let testerList = this.form.tester
					let list = []
					this.testerOptions.filter(item1 => {
						testerList.filter(item2 => {
							if(item1['name'] == item2){
								list.push(item1['id'])
							}
						})
					})

					this.formSure.tester = list
					this.formSure.task_type = this.form.task_type
					this.formSure.manpower = this.form.manpower
					this.formSure.os_type = this.form.os_type
					this.formSure.version = this.form.version
					this.formSure.unit_version = this.form.unit_version
					this.formSure.firmware_version = this.form.firmware_version
					this.formSure.test_suite_url = this.form.test_suite_url
					this.formSure.remark = this.form.remark

					console.log(this.formSure,1212121)
					taskIdPost(this.formSure,this.id).then(res => {
						console.log(res,343434)
						this.$parent.initTable()
						this.dialogFormVisible = false

					})


				} else {
					return false;
				}
			});


		},

		// 测试组里的组员
		testPerson(argm){
			groupId(argm).then(res => {
				console.log(res,34343)
				this.testerOptions = res.data.tester
			})
		},
		initData(num,data){
			this.$nextTick(() => {
				this.$refs.form.resetFields()
			})

			this.num = num
			this.id = data
			taskId(data).then(res => {
				console.log(res,22222)
				// this.tableData = res.data.task_case
				res.data.task_case.filter(item => {
					this.tableData.push(item['case'])
				})
				console.log(this.tableData,33333)
				this.form = Object.assign({},res.data)
				this.form.tester = []
				res.data.tester.filter(item => {
					this.form.tester.push(item['name'])
				})

				this.testPerson(res.data.group_id)
			})

		}
	}

}
</script>

<style lang="scss" scoped>
.role{

}
.step{
	margin: 10px 0;
}
.testCase{
	margin-top: 22px;
	border-top: 1px solid #eee;
	padding-top: 10px;
	height: 430px;
	overflow:scroll;
}
.testTable{
	height: 430px;
	overflow:scroll;
}
.del{
	color: #1890FF;
	cursor: pointer;
}
</style>
